import SwiftUI

struct RegisterStep1View: View {
    @State private var countryCode: String = "+86"
    @State private var phone: String = ""

    var body: some View {
        VStack(spacing: AppSpacing.xl) {
            Header(title: "注册", subtitle: "填写基础信息")

            VStack(spacing: AppSpacing.m) { PhoneField(countryCode: countryCode, phone: $phone) }

            NavigationLink("下一步") { RegisterStep2View() }
                .buttonStyle(.primary)
            Spacer()
        }
        .padding(.horizontal, AppSpacing.xl)
        .padding(.top, AppSpacing.xl)
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct RegisterStep2View: View {
    @State private var otp: String = ""

    var body: some View {
        VStack(spacing: AppSpacing.xl) {
            Header(title: "验证", subtitle: "已向你的手机号发送验证码")
            OTPInput(code: $otp)
            NavigationLink("下一步") { RegisterStep3View() }
                .buttonStyle(.primary)
            Spacer()
        }
        .padding(.horizontal, AppSpacing.xl)
        .padding(.top, AppSpacing.xl)
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct RegisterStep3View: View {
    @State private var password: String = ""
    @State private var confirm: String = ""
    @State private var isVisible: Bool = false

    var body: some View {
        VStack(spacing: AppSpacing.xl) {
            Header(title: "设置密码", subtitle: "请设置你的登录密码")

            VStack(spacing: AppSpacing.m) {
                HStack {
                    if isVisible { TextField("密码", text: $password) } else { SecureField("密码", text: $password) }
                    Button(action: { isVisible.toggle() }) { Image(systemName: isVisible ? "eye.slash" : "eye") }
                }
                .padding(.horizontal, AppSpacing.l)
                .frame(height: 52)
                .overlay(RoundedRectangle(cornerRadius: AppRadius.m).strokeBorder(.separator))

                HStack {
                    if isVisible { TextField("确认密码", text: $confirm) } else { SecureField("确认密码", text: $confirm) }
                }
                .padding(.horizontal, AppSpacing.l)
                .frame(height: 52)
                .overlay(RoundedRectangle(cornerRadius: AppRadius.m).strokeBorder(.separator))
            }

            Button("完成注册") {}
                .buttonStyle(.primary)
            Spacer()
        }
        .padding(.horizontal, AppSpacing.xl)
        .padding(.top, AppSpacing.xl)
        .navigationBarTitleDisplayMode(.inline)
    }
}

// MARK: - Subviews

struct Header: View {
    let title: String
    let subtitle: String
    var body: some View {
        VStack(alignment: .leading, spacing: AppSpacing.m) {
            Text(title).font(.largeTitle.bold())
            Text(subtitle).foregroundStyle(.secondary)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct OTPInput: View {
    @Binding var code: String
    private let length: Int = 6

    var body: some View {
        HStack(spacing: AppSpacing.m) {
            ForEach(0..<length, id: \.self) { index in
                ZStack {
                    RoundedRectangle(cornerRadius: AppRadius.m).strokeBorder(.separator)
                        .frame(width: 44, height: 52)
                    Text(character(at: index))
                        .font(.title3).bold()
                }
            }
        }
        .overlay(
            TextField("", text: $code)
                .keyboardType(.numberPad)
                .textContentType(.oneTimeCode)
                .frame(width: 0, height: 0)
                .opacity(0.01)
        )
        .onChange(of: code) { _, newValue in
            code = String(newValue.prefix(length)).filter { $0.isNumber }
        }
    }

    private func character(at index: Int) -> String {
        guard index < code.count else { return "" }
        let char = Array(code)[index]
        return String(char)
    }
}


